<template>
	<el-dialog title="配置考试课程" :visible.sync="visible" top="0" width="992px">
		<el-scrollbar class="config_exam_course" v-loading="loading" :style="{ '--columnNum': courseColNumber }">
			<template v-if="nonCheckedCourse.length > 0">
				<el-card shadow="hover" v-for="(item, index) in nonCheckedCourse" :key="index" @click.native="handleSelectCourse(item)">
					<template slot="header">
						<span class="el-icon-subscript" v-if="item.id === checkedCourseId" />
						<el-image slot="header" fit="cover" :src="item | courseCoverFilter(siteInfo)"></el-image>
					</template>
					<h4>{{ item.title }}</h4>
				</el-card>
			</template>
			<el-empty v-else :image-size="100" description="暂无可关联的课程"></el-empty>
		</el-scrollbar>
		<template slot="footer">
			<el-button size="medium" @click="visible = false">取消</el-button>
			<el-button size="medium" type="primary" @click="handleRelatedCourse">确定</el-button>
		</template>
	</el-dialog>
</template>

<script>
import lodash from 'lodash';
import { mapGetters } from 'vuex';
import { queryExamCourseList, addedExamCourse, deleteExamCourse } from '@/api/exam/testExamCourse';
export default {
	props: {
		value: { type: Boolean, default: false },
		list: { type: Array, default: () => [] },
		dataId: { type: String, default: '' }
	},
	data() {
		return {
			loading: false,
			visible: this.value,
			checkedCourseId: {},
			defaultChecked: {},
			examCourse: []
		};
	},
	computed: {
		...mapGetters(['siteInfo']),
		nonCheckedCourse() {
			let arr = this.examCourse.filter((n) => n.examId !== this.dataId);
			return this.list.filter((n) => !arr.some((k) => k.courseId === n.id));
		},
		courseColNumber() {
			let len = this.nonCheckedCourse.length;
			if (len === 0) {
				return 1;
			} else if (Math.floor(len / 4) === 0) {
				return len;
			} else {
				return 4;
			}
		}
	},
	filters: {
		courseCoverFilter(input, data) {
			let attach = input.sysAttachment || {};
			if (!!attach.httpUrl) {
				return attach.httpUrl.replaceIP();
			} else if (!!data.defaultCourseImg) {
				return data.defaultCourseImg;
			} else {
				return require('@/assets/img/course-cover.jpg');
			}
		}
	},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		visible(flag) {
			this.$emit('input', flag);
			if (!flag) return false;
			this.initExamCourse();
		}
	},
	methods: {
		//初始化考试课程
		async initExamCourse() {
			this.loading = true;
			this.getExamCourseData();
			this.checkedCourseId = '';
		},

		//获取考试课程数据
		async getExamCourseData() {
			let params = { page: 1, limit: 9999 };
			let result = await queryExamCourseList(params).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				let datas = result.data || [];
				let checkeds = datas.find((n) => n.examId === this.dataId);
				this.defaultChecked = lodash.cloneDeep(checkeds || {});
				this.checkedCourseId = checkeds?.courseId || '';
				this.examCourse = datas;
			}
		},

		//选择课程
		handleSelectCourse(item) {
			this.checkedCourseId = this.checkedCourseId === item.id ? '' : item.id;
		},

		//新增考试课程
		async handleAddedExamCourse(courseId) {
			let params = { examId: this.dataId, courseId };
			let result = await addedExamCourse(params).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('关联考试课程成功');
				this.$emit('refresh');
			}
		},

		// 确定选择考试课程
		async handleRelatedCourse() {
			if (!lodash.isEmpty(this.defaultChecked)) {
				await deleteExamCourse(this.defaultChecked.tecId);
			}
			if (this.checkedCourseId) {
				await this.handleAddedExamCourse(this.checkedCourseId);
			}
			this.visible = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.el-scrollbar.config_exam_course::v-deep {
	flex: 1;
	margin: -15px;
	max-height: 100%;
	min-height: 200px;
	.el-scrollbar__wrap {
		padding-bottom: 6px;
	}
	.el-scrollbar__view {
		display: grid;
		grid-template-columns: repeat(var(--columnNum), 1fr);
		box-sizing: border-box;
		place-items: center;
		grid-gap: 16px;
		padding: 16px;
		.el-empty {
			display: flex;
			flex-direction: column;
			justify-content: center;
			height: 168px;
			margin: 0;
		}
	}
	.el-card {
		width: 226px;
		cursor: pointer;
	}
	.el-card__header {
		position: relative;
		padding: 56.25% 0 0;
		&::before {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			content: '';
			background: rgba(0, 0, 0, 0.5);
			z-index: 2;
		}
		.el-image {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			width: 100%;
			height: 100%;
		}
		.el-icon-subscript {
			position: absolute;
			top: 0;
			right: 0;
			z-index: 3;
			color: #67c23a;
			font-size: 32px;
		}
	}
	.el-card__body {
		padding: 12px;
		h4 {
			line-height: 1;
		}
	}
}
</style>
